import { Button, Col, Form, Input, InputNumber, Modal, Row, Select } from 'antd';
import React, { ReactNode, useEffect } from 'react';
import styles from "./index.module.scss";
import CustomForm from '../../../../components/customerForm';

interface OperateModalProps {
    title: string;
    open: boolean;
    initValue?: any;
    onOk: (values: any) => void;
    onCancel: (e: any) => void;
}

const formConfig = [
    {
        name: "name",
        label: "姓名",
        allowClear: true,
        required: true,
    }, {
        name: "age",
        label: "年龄",
        allowClear: true,
        required: true,
        render: () => {
            return <InputNumber placeholder="请输入年龄" min={1} max={100} style={{ width: "100%" }} />
        }
    }, {
        name: "sex",
        label: "性别",
        allowClear: true,
        required: true,
        options: [
            {
                label: "男",
                value: "男"
            },
            {
                label: "女",
                value: "女"
            }
        ]
    }, {
        name: "email",
        label: "邮箱",
        allowClear: true,
        required: true,
        rules: [{
            type: "email",
            message: "请输入正确格式的邮箱地址"
        }],
        render: () => {
            return <Input placeholder="请输入邮箱" />
        }
    }, {
        name: "phone",
        label: "电话",
        allowClear: true,
        required: true,
        rules: [{
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确格式的手机号码"
        }],
        render: () => {
            return <Input placeholder="请输入手机号码" />
        }
    }
]

const OperateModal: React.FC<OperateModalProps> = ({ title, open, initValue, onOk, onCancel }) => {
    const [initForm, setInitForm] = React.useState<any>();
    useEffect(() => {
        if (open) {
            if (initValue && Object.keys(initValue).length > 0) {
                setInitForm(initValue)
            }
        } else {
            setInitForm({})
        }
    }, [open])
    const handleSubmit = (e: any) => {
        if (initValue.id) {
            onOk({ ...e, id: initValue.id });
        } else {
            onOk(e);
        }
    }

    const handleCancel = (e: any) => {
        onCancel(e);
    }

    return (
        <Modal
            centered
            title={title}
            open={open}
            footer={null}
            keyboard={false}
            maskClosable={false}
            destroyOnClose={true}
            onCancel={() => handleCancel(false)}>
            <CustomForm
                initFormValues={initForm}
                formFileds={formConfig}
                formLayout='vertical'
                onSubmit={handleSubmit}
                onCancel={handleCancel}
            />
        </Modal>
    )
}

export default OperateModal;